<template>
	<Layout :class="'bg-white p-2'">
		<Row :class="'m-1'">

			<Button type="error" @click="newCar" style="margin-left: 20px;">新增</Button>
		</Row>
		<Row :class="'m-1'">
			<el-select v-model="rentalPriceId" clearable placeholder="价格" size="small"
				style="width: 150px;margin-right: 20px;" @change="search(1)">
				<el-option v-for="item in carRentalPrice" :key="item.rentalPriceId" :label="item.priceInterval"
					:value="item.rentalPriceId">
				</el-option>
			</el-select>
			<el-select  v-model="conditionId" clearable placeholder="车龄" size="small" style="width: 150px;margin-right: 20px;"
			 @change="search(1)">
			     <el-option
			       v-for="item in carConditions"
			       :key="item.conditonId"
			       :label="item.conditionInterval"
			       :value="item.conditonId">
			     </el-option>
			</el-select>
			<el-select v-model="mileageId" clearable placeholder="里程" size="small"
				style="width: 150px;margin-right: 20px;" @change="search(1)">
				<el-option v-for="item in mileages" :key="item.mileageId" :label="item.mileageInterval"
					:value="item.mileageId">
				</el-option>
			</el-select>
			<Input :class="'w-25 m-2'" v-model="searchKey" placeholder="请输入检索关键字" />
			<Button type="primary" shape="circle" @click="search(1)" icon="ios-search">查询</Button>

		</Row>
		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.carId)">详细</Button>
					<Button type="error" size="small" @click="remove(row.carRentalInfoId)">删除</Button>
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</Layout>
</template>

<script>
	export default {
		data() {
			return {
				rentalPriceId: "",
				priceMin: 0,
				priceMax: 0,
				searchKey: "",
				brandId: 0,
				conditionId: "",
				mileageId: "",
				tableInfo: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "车辆编号",
							key: "carId",
						},
						{
							title: "型号",
							key: "type",
						},
						{
							title: "归属地",
							key: "ownerShip",
						},
						{
							title: "车龄",
							key: "carCondition",
						},
						{
							title: "表显里程",
							key: "mileage",
						},
						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: [],
				},
				carConditions: [],
				mileages: [],
				carRentalPrice: []
			};
		},
		methods: {
			init: function() {
				this.$data.tableInfo.currentPage = 0;
				this.search(1);
			},
			newCar: function() {
				this.$router.push({
					name: "carRental_new"
				});
			},
			show: function(carId) {
				this.$router.push({
					name: "carRental_detail",
					params: {
						carId
					}
				});
			},
			search: function(current) {
				this.http.get({
					url: "/car-rental-info/page",
					param: {
						rentalPriceId: this.$data.rentalPriceId,
						currentPage: current,
						searchKey: this.$data.searchKey,
						brandId: this.$data.brandId,
						conditionId: this.$data.conditionId,
						mileageId: this.$data.mileageId
					}
				}).then(data => {
					this.$data.tableInfo.currentPage = data.current;
					this.$data.tableInfo.total = data.total;
					this.$data.tableInfo.pageSize = data.size;
					console.log(data)
					this.$data.tableInfo.data = data.records;
				});
			},
			pageSearch: function(changedPage) {
				console.log(changedPage);
				this.$data.tableInfo.currentPage = changedPage;
				this.search(changedPage);
			},
			remove: function(carRentalInfoId) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除租车信息，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/car-rental-info/info",
							param: {
								carRentalInfoId
							}
						}).then(data => {
							this.message.info('删除成功');
							this.search(this.$data.tableInfo.currentPage);
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			searchPrice: function() {
				this.http.get({
					url: "/car-rental-price/list",
					param: {}
				}).then(data => {
					this.$data.carRentalPrice = data;
				});
			},
			searchCondition: function() {
				this.http.get({
					url: "/car-condition/all",
					param: {}
				}).then(data => {
					this.$data.carConditions = data;
					console.log(data)
				});
			},
			searchMileage: function() {
				this.http.get({
					url: "/mileage/all",
					param: {}
				}).then(data => {
					this.$data.mileages = data;
				});
			}
		},
		created: function() {
			this.searchPrice();
			this.searchCondition();
			this.searchMileage();
			this.init();
		},
	}
</script>

<style>
	.el-dropdown-link {

		cursor: pointer;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}
</style>
